<template>
	<view>
		<button @click="callSetStorage()">setStorage</button>
		<button @click="callGetStorage()">getStorage</button>
		<button @click="callStorageInfo()">storageInfo</button>
		<button @click="callRemoveStorage()">removeStorage</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			callSetStorage() {
				console.log("callSetStorage--> username qkh");
				uni.setStorage({
					key: "username",
					data: "qkh",
					success() {
						console.log("存储username成功");
					},
					fail() {
						console.error("存储username失败");
					}
				})
			},
			callGetStorage() {
				uni.getStorage({
					key: "username", // 修正了key值，与setStorage保持一致
					success: function(result) {
						console.log("获取存储成功:", result.data);
					},
					fail: function(result) {
						console.error("获取存储失败");
					}
				})
			},
			callStorageInfo() { // 修正了方法名
				console.log("获取存储信息");
				uni.getStorageInfo({ // 修正了API名称
					success: function(result) {
						console.log("存储信息:", result);
					},
					fail: function(result) {
						console.error("获取存储信息失败");
					}
				})
			},
			callRemoveStorage() { // 修正了方法名
				uni.removeStorage({
					key: "username", // 修正了key值，与setStorage保持一致
					success: () => { // 修正了箭头函数语法
						console.log("删除存储成功");
					},
					fail: () => { // 添加了fail回调
						console.error("删除存储失败");
					}
				})
			}
		}
	}
</script>

<style>
	/* 可以添加一些样式让按钮更好看 */
	button {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #007AFF;
		color: white;
		border-radius: 10rpx;
	}
</style>